    	/*二话不说，上来就用通配符删除浏览器默认 值*/
    	*{
    		margin:0;
    		padding: 0;
    	}
    	
    	#main{
    		width: 620px;
    		height: 480px;
    		position: relative;
    		margin: 50px auto;/*为了在此的观看效果，我选择了这个数据*/
    		overflow: hidden;/*因为设置了隐藏，所示的效果只有一张solid1*/
    		/*可在元素赠加和定位完成后进行影藏*/
    	}
    	/*
    	 * 为所以图片设置同main一样宽高不大推荐
    	 	因为，如果图片没进行过处理，强制改变宽高，容易产生变形，
    	 	图片将变得难看。
    	 * *//*为了使图片叠加所以我们使用absolute，在此之前
    	 * 	我们需要去它的父级添加一个relative。
    	 * */
    	#main .banner-slide{
    		position: absolute;
    		width: 620px;
    		height: 480px; 
    		overflow: hidden;/*防止图片过大，超出范围，影响视觉*/
    		display:none;
    	}
    	#main .slide-active{
    		display: block;
    	}
    	/*
    	 * 挨个设置轮播图的图片
    	 * 为了方便在图片所在div加内容，标签
    	 * 我们选择把轮播图内容以background形式出现。
    	 */
    	#main .slide1{
    	 
    	}
    	#main .slide2{
    	 
    	}
    	#main .slide3{
    	 
    	}
    	#main .slide4{
    		 
    	}
    	#main .slide5{
    	 
    	}
    	/*ul标签的移动*/
    	#main .dots #dots{
    		position: absolute;
    		margin-top: 560px;/*由于我设置了li高为40，总高600，所以进行
    		560的移动*/
    		margin-left: 275px;/*(1200-5*130)/2*/
    	}
    	#main .dots #dots li{
    		height: 40px;
    		width: 80px;
    		border-radius: 20%;
    		background: gray;/*在此的样式根据个人喜好自己添加*/
    		/*由于上面的定位，所以*/
    		float: left;/*为了是图标自左向右*/
    		margin-left: 50px;
    		list-style: none;
    	}
    	#main .dots #dots .li1{
    		background: blue;
    	}
    	#main #left-right .move{
    		position: absolute;
    		margin-top:260px;
    		height: 80px;
    		width: 40px;
    		font-size: 50px;/*设置<>大小*/
    		padding-left: 10px ;
    	}
    	/*左右分离*/
    	#main #left-right #next{
    		right:0;
    	}
    	/*触碰上下张有效果*/
    	#main #left-right .move:hover{
    		background: rgba(0,0,0,0.4);
    	}
    	
    
